<template>
	<view>
		<Header title="数据看盘"></Header>
		<view class="main_wrap">
			<view class="main">
				<view class="main_item">
					<view class="main_top">综合数据</view>
					<view class="main_left">
						<van-row>
							<van-col span="12">
								<view class="ml pb20 br">
									<view>系统用户数</view>
									<view class="count">1375</view>
									<view>单位: 个</view>
								</view>
								<view class="ml bt br">
									<view>系统用户数</view>
									<view class="count">310.57</view>
									<view>单位: 万株</view>
								</view>
							</van-col>

							<van-col span="12">
								<view class="mr">
									<view>系统用户数</view>
									<view class="count pb85 pt85">7777</view>
									<view>单位: 万斤</view>
								</view>
							</van-col>
						</van-row>
					</view>

				</view>
				<view class="main_item">
					<view class="main_top">用户数据</view>
					<van-row>
						<van-col span="12">
							<view class="ml pb20 pl10 pt20 br bb">
								<view>平台用户总量</view>
								<view class="count">1375</view>
								<view>个</view>
							</view>

						</van-col>
						<van-col span="12">
							<view class="ml pb20 pl10 pt20 bb">
								<view>其他机构</view>
								<view class="count">1375</view>
								<view>个</view>
							</view>

						</van-col>
					</van-row>
					<van-row>
						<van-col span="12">
							<view class="ml pb20 pl10 pt20 br bb">
								<view>平台用户总量</view>
								<view class="count">1375</view>
								<view>个</view>
							</view>

						</van-col>
						<van-col span="12">
							<view class="ml pb20 pl10 pt20 bb">
								<view>其他机构</view>
								<view class="count">1375</view>
								<view>个</view>
							</view>

						</van-col>
					</van-row>
					<van-row>
						<van-col span="12">
							<view class="ml pb20 pl10 pt20 br">
								<view>平台用户总量</view>
								<view class="count">1375</view>
								<view>个</view>
							</view>

						</van-col>
						<van-col span="12">
							<view class="ml pb20 pl10 pt20">
								<view>其他机构</view>
								<view class="count">1375</view>
								<view>个</view>
							</view>

						</van-col>
					</van-row>

				</view>

				<view class="jiaoyi">
					<view class="main_item bn">
						<view class="main_top mb20">本年度苗木交易数据</view>
						<view class="tongji">
							统计图占位
						</view>
						<view style="text-align: center;">苗木交易走势图</view>
					</view>
					<view class="main_item pr20 pl20 bn">
						<view
							style="border: 1px solid red;padding:20rpx 10rpx 10rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
							<view>本年度苗木交易总量</view>
							<view style="text-align: right;margin-right: 80rpx;font-weight: bold;">25310</view>
							<view style="display: flex;justify-content: space-between;">
								<view>较上一年度
									<text style="margin-left: 30rpx;">↑0.15%</text>
								</view>

								<view>单位:株</view>
							</view>

						</view>
						<van-row gutter="15">
							<van-col span="12">
								<view class="day">
									<view style="margin-bottom: 30rpx;">今日交易量</view>
									<view style="text-align: center;margin-left: 40rpx;">271</view>
								</view>
							</van-col>
							<van-col span="12">
								<view class="day mb20">
									<view style="margin-bottom: 30rpx;">本周交易量</view>
									<view style="text-align: center;margin-left: 40rpx;">271</view>
								</view>
							</van-col>
							<van-col span="12">
								<view class="day">
									<view style="margin-bottom: 30rpx;">本月交易量</view>
									<view style="text-align: center;margin-left: 40rpx;">271</view>
								</view>
							</van-col>
							<van-col span="12">
								<view class="day">
									<view style="margin-bottom: 30rpx;">本季度交易量</view>
									<view style="text-align: center;margin-left: 40rpx;">271</view>
								</view>
							</van-col>
						</van-row>

					</view>

				</view>

				<view class="main_item pb40">
					<view class="main_top">全县存量坚果树</view>
					<view class="main_item pr20 pl20 bn">
						<view
							style="border: 1px solid red;padding:20rpx 10rpx 10rpx;border-radius: 10rpx;margin-bottom: 20rpx;margin-top: 20rpx;">
							<view>当前存量树苗</view>
							<view style="text-align: right;margin-right: 80rpx;font-weight: bold;">25310</view>
							<view style="text-align: right;margin-right: 30rpx;">单位:株</view>
						</view>
						<van-row gutter="15">
							<van-col span="12">
								<view class="day">
									<view style="margin-bottom: 30rpx;">今日交易量</view>
									<view style="text-align: center;margin-left: 40rpx;">271</view>
								</view>
							</van-col>
							<van-col span="12">
								<view class="day mb20">
									<view style="margin-bottom: 30rpx;">本周交易量</view>
									<view style="text-align: center;margin-left: 40rpx;">271</view>
								</view>
							</van-col>
							<van-col span="12">
								<view class="day">
									<view style="margin-bottom: 30rpx;">本月交易量</view>
									<view style="text-align: center;margin-left: 40rpx;">271</view>
								</view>
							</van-col>
							<van-col span="12">
								<view class="day">
									<view style="margin-bottom: 30rpx;">本季度交易量</view>
									<view style="text-align: center;margin-left: 40rpx;">271</view>
								</view>
							</van-col>
						</van-row>
						<van-row>
							<view class="miaomu_price" v-for="item in 8">
								<view class="left_miaomu">新栽苗木(1年以内)</view>
								<view style="font-weight: bold;">10791</view>
							</view>
						</van-row>
					</view>

				</view>

				<view class="main_item">
					<view class="main_top">产量预估</view>
					<view class="main_item pr20 pl20 bn">
						<van-row custom-class="row_item">
							<van-col span="7" custom-class="col10">
								<view style="font-size: 24rpx;">2021预计产量</view>
							</van-col>
							<van-col span="16" offset="1" custom-class="col14">
								<van-col span="20" custom-class="co120">12,141,180</van-col>
								<van-col span="4" custom-class="col4">
									斤
								</van-col>
							</van-col>
						</van-row>

						<van-row custom-class="row_item">
							<van-col span="7" custom-class="col10">
								<view style="font-size: 24rpx;">2021预计产量</view>
							</van-col>
							<van-col span="16" offset="1" custom-class="col14">
								<van-col span="20" custom-class="co120">100000</van-col>
								<van-col span="4" custom-class="col4">
									斤
								</van-col>
							</van-col>
						</van-row>




						<view class="yuji">
							<view class="yuji_left">
								<van-row>
									<van-col span="12">
										<view style="font-size: 28rpx;padding: 20rpx 0 20rpx 20rpx;">
											<view>预计同比</view>
											<view>上一年度</view>
										</view>

									</van-col>
									<van-col span="12">
										<view style="padding: 40rpx 0;">
											<view>↑ 5.1%</view>
										</view>

									</van-col>
								</van-row>

							</view>



							<view class="yuji_right">
								<van-row>
									<van-col span="12">
										<view class="yuji_right_main">
											<view>预计</view>
											<view>上一年度</view>
										</view>

									</van-col>
									<van-col span="12">
										<view style="padding: 40rpx 0;">
											<view>↑ 5.1%</view>
										</view>

									</van-col>
								</van-row>
							</view>

						</view>

					</view>
				</view>
				<view class="main_item">
					<view class="main_top">实际产量</view>
					<view class="main_item pr20 pl20 bn">
						<van-row custom-class="row_item">
							<van-col span="7" custom-class="col10">
								<view style="font-size: 24rpx;">本年度交易总量</view>
							</van-col>
							<van-col span="16" offset="1" custom-class="col14">
								<van-col span="20" custom-class="co120">12,141,180</van-col>
								<van-col span="4" custom-class="col4">
									斤
								</van-col>
							</van-col>
						</van-row>

						<van-row custom-class="row_item">
							<van-col span="7" custom-class="col10">
								<view style="font-size: 24rpx;">本年度交易金额</view>
							</van-col>
							<van-col span="16" offset="1" custom-class="col14">
								<van-col span="20" custom-class="co120">100000</van-col>
								<van-col span="4" custom-class="col4">
									斤
								</van-col>
							</van-col>
						</van-row>




						<view class="yuji">
							<view class="yuji_left">
								<van-row>
									<van-col span="12">
										<view style="font-size: 28rpx;padding: 20rpx 0 20rpx 20rpx;">
											<view>数据</view>
											<view>误差率</view>
										</view>

									</van-col>
									<van-col span="12">
										<view style="padding: 40rpx 0;">
											<view>↑ 5.1%</view>
										</view>

									</van-col>
								</van-row>

							</view>



							<view class="yuji_right">
								<van-row>
									<van-col span="12">
										<view class="yuji_right_main">
											<view>实际</view>
											<view>销售均价</view>
										</view>

									</van-col>
									<van-col span="12">
										<view style="padding: 40rpx 0;">
											<view>↑ 5.1%</view>
										</view>

									</van-col>
								</van-row>
							</view>

						</view>

					</view>
				</view>
				<view class="main_item">
					<view class="main_top">信息库数据</view>
					<view class="main_item pr20 pl20 bn">
						<view class="zhuanjia pr20">
							<view class="left_miaomu">入住专家数量</view>
							<view style="font-weight: bold;">65</view>
							<view style="font-size: 26rpx;margin-top: 20rpx;">人</view>
						</view>
						
						
						<view class="main_bottom">
							<view class="left_bottom">
								<view >答案库</view>
								<view >1051</view>
							</view>
							<view class="right_bottom">
								<view >答案库</view>
								<view >1051</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import Header from "../../components/header.vue"
	export default {
		data() {
			return {

			}
		},
		components: {
			Header
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.br {
		border-right: 1px solid orange;
	}

	/deep/ .row_item {
		line-height: 96rpx;
		margin: 10rpx 0;
	}

	/deep/ .co120 {
		font-weight: bolid;
		text-align: center;
		font-size: 50rpx;
	}

	/deep/ .col4 {
		font-size: 24rpx;
		line-height: normal;
		margin-top: 55rpx;
	}

	/deep/ .col10 {
		border-radius: 15rpx 0 0 15rpx;
		border: 1px solid orange;
		text-align: center;
		// margin-right: 20rpx;
	}

	/deep/ .col12 {
		border-radius: 15rpx;
		border: 1px solid orange;
	}

	/deep/ .col14 {
		border-radius: 0 15rpx 15rpx 0;
		border: 1px solid orange;

	}


	.bn {
		border: none !important;
	}

	.bb {
		border-bottom: 1px solid orange;
	}

	.bt {
		border-top: 1px solid red;
	}

	.mr80 {
		margin-right: 80rpx;
	}

	.pl48 {
		padding-left: 48rpx;
	}

	.pr20 {
		padding-right: 20rpx !important;
	}

	.pl20 {
		padding-left: 20rpx;
	}

	.pb20 {
		padding-bottom: 20rpx;
	}

	.pl10 {
		padding-left: 10rpx;
	}

	.pb10 {
		padding-bottom: 10rpx;
	}

	.pt20 {
		padding-top: 20rpx;
	}

	.mb20 {
		margin-bottom: 20rpx;
	}

	.pt85 {
		padding-top: 85rpx;
	}

	.pb40 {
		padding-bottom: 40rpx;
	}

	.pb85 {
		padding-bottom: 85rpx;
	}

	.miaomu_price, .zhuanjia{
		border-radius: 15rpx;
		border: 1px solid orange;
		padding: 20rpx 60rpx 20rpx 10rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;

		&:first-child {
			margin-top: 20rpx;
		}
	}

	.left {
		// height: 80rpx;
		// line-height: 80rpx;
		text-align: center;
		border-radius: 15rpx 0 0 15rpx;
		border: 1px solid red;
		padding: 0 15rpx;
		font-size: 24rpx;
	}

	.right {
		// display: flex;
		// flex-direction: column;
		// height: 80rpx;
		// width: 226rpx;
		// width: 400rpx;
		// line-height: 80rpx;
		border-radius: 0 15rpx 15rpx 0;
		border: 1px solid red;
		margin-left: 20rpx;
		font-size: 36rpx;
		box-sizing: border-box;
		padding-left: 48rpx;
		padding-right: 24rpx;
	}



	.main_wrap {
		padding: 20rpx 20rpx 0 10rpx;

		.main {
			border: 1px solid red;
			padding: 30rpx 20rpx 80rpx 20rpx;

			.jiaoyi {
				border-radius: 10rpx;
				border: 1px solid red;
			}

			.main_item {
				border-radius: 10rpx;
				border: 1px solid red;
				margin-bottom: 20rpx;
				
				.main_top {
					border-bottom: 1px solid gray;
					padding-top: 20rpx;
					padding-left: 15rpx;
					padding-bottom: 20rpx;
				}
				
				.main_bottom{
					display: flex;
					.left_bottom,.right_bottom{
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-radius: 15rpx;
						border: 1px solid red;
						width: 50%;
						padding: 20rpx 30rpx;
						
						
					}
					.right_bottom{
						margin-left: 20rpx;
					}
				}

				.main_left {


					.mr {


						padding-top: 20rpx;
						padding-left: 10rpx;
						padding-bottom: 10rpx;
					}

				}

				.count {
					font-weight: bold;
					font-size: 40rpx;
					text-align: center;
				}

				.ml {
					padding-top: 20rpx;
					padding-left: 10rpx;
					padding-bottom: 10rpx;

				}

				.tongji {
					height: 400rpx;
					border: 1px solid blue;
					padding: 20rpx 40rpx 0;
				}

				.day {
					border-radius: 15rpx;
					background-color: #007AFF;
					padding: 20rpx 0rpx 60rpx 10rpx;
				}

				.yuji {
					display: flex;
					text-align: center;

					.yuji_left {
						width: 49%;
						margin-right: 1%;
						border: 1px solid orangered;
						border-radius: 15rpx;
					}

					.yuji_right {
						width: 49%;
						margin-left: 1%;
						border: 1px solid orangered;
						border-radius: 15rpx;

						.yuji_right_main {
							font-size: 28rpx;
							padding: 20rpx 0 20rpx 20rpx;
						}
					}
				}
			}
		}
	}
</style>
